<template>
  <div class="staff">
        <Breadcrumb :pathContent="content"/>
        <el-form>
            <el-form-item>
                <div class="staff-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="员工账号" name="first" v-if="staffdetail"><StaffAccount /></el-tab-pane>
                        <el-tab-pane label="部门设置" name="second" v-if="department"><DepartmentSetting /></el-tab-pane>
                        <el-tab-pane label="角色权限管理" name="third" v-if="rolelist"><PermissionsSetting @itemBack="itemBackPage"/></el-tab-pane>
                    </el-tabs>
                    <AddPopover />
                </div>
            </el-form-item>
      </el-form>
  </div>
</template>
<script>
import { getRoleList } from '../../public/js/setting'
const StaffAccount = () => import('@/components/setting/staff/StaffAccount')
const DepartmentSetting = () => import('@/components/setting/staff/DepartmentSetting')
const PermissionsSetting = () => import('@/components/setting/staff/PermissionsSetting')
const AddPopover = () => import('@/components/common/AddPopover')
const Breadcrumb = () => import('@/components/common/Breadcrumb')

export default {
  name: 'Staff',
  token: '',
  data () {
    return {
      activeName: 'first',
      information: {},
      content: {
        firstTitle: '系统设置',
        secondTitle: '员工账号权限管理',
        type: 'close'
      }
    }
  },
  created () {
    window.commo.showMenu(this)
  },
  methods: {
    handleClick (val) {
      if (val.name === 'third') {
        getRoleList().then(res => {
          if (res.data.errCode === 0) window.bus.$emit('rolesArray', res.data.roleEntities)
        })
      }
    },
    itemBackPage (value) {
      this.activeName = value
    }
  },
  components: {
    StaffAccount,
    DepartmentSetting,
    PermissionsSetting,
    AddPopover,
    Breadcrumb
  }
}
</script>
<style lang="scss">
    .staff-content {
    background-color: white;
    padding: 0px 30px;
    position: relative;
    .permissions-setting{
      .information-btn{
        margin-left: -30px;
        box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
      }
    }
    .el-tabs__content{
      padding-top:22px;
    }
  }
  .expand-trigger div {
    height: 50px!important;
  }
  .increase {
    position: absolute;
    top: 0;
    left: 0;
    width: 96.5%;
    background: white;
    z-index: 3;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    h1 {
      text-align: left;
      margin-bottom: 10px;
    }
    .el-form-item {
      .el-form-item__content {
        text-align: left;
        .el-input {
          width: 300px;
        }
        .el-button{
          width: 82px!important;
          height: 34px!important;
          padding:0!important;
        }
      }
    }
  }
  .el-tabs__nav-wrap{
    height:74px;
    line-height: 74px;
  }
  .el-tabs__header{
    margin:0;
  }
  .el-tabs__content{
    
  }
</style>
